(function (window) {
  'use strict';

  // 筛选不同状态下的内容的呈现
  let filters = {
    all (todos) {
      return todos;
    },
    active (todos) {
      return todos.filter(item => !item.completed);
    },
    completed (todos) {
      return todos.filter(item => item.completed)
    }
  };
  // 声明存储本地存储中保存事项的键
  const TODOS_KEY = 'todos_vue';
  let todoStorage = {
    // 读取本地存储数据
    get () {
      return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
    },
    // 更新本地存储
    set (todos) {
      localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
    }
  };
  
	new Vue({
		el: '#app',
		data: {
			// 总的任务
			// todos: [
			// 	{
			// 		id: 1,
			// 		title: '内容1',
			// 		completed: false
			// 	}, {
			// 		id: 2,
			// 		title: '内容2',
			// 		completed: true
			// 	}, {
			// 		id: 3,
			// 		title: '内容3',
			// 		completed: false
			// 	}
			// ],
			todos: todoStorage.get(),
			// 输入框内容
			newTodo: '',
			// 正在编辑的内容
			editTodo: null,
			// 存储正在编辑的原始内容
			titleBefore: '',
			// 状态
			todoType: 'all'

		},
		// 自定义焦点
		directives: {
			'focus'(el, binding) {
				if (binding.value) {
					el.focus()
				}
			}
		},
    watch:{
			// 监听todos的数据的变化
			todos: {
				deep:true,
				handler:todoStorage.set
			}
		},
		computed: {
			//用于进行事项筛选处理
			filteredTodo() {
				return filters[this.todoType](this.todos)
			},
			//未完成的任务数量
			getCount() {
				// return this.todos.filter(item => !item.completed).length
				// 直接检测filters里的active的长度就能得到未完成的数量
				return filters.active(this.todos).length
			},

			// 实现多个事项切换
			getChange: {
				get() {
					if (this.getCount === 0) {
						return true
					}
				},
				set(val) {
					return this.todos.filter(item => item.completed = val)
				}
			}
		},
		methods: {
			// 实现单位复数化
			getPlural(word) {
				return word + (this.getCount === 1 ? '' : 's')
			},
			//增加新的todo项
			addTodo() {
				let val = this.newTodo.trim()
				if (val) {
					this.todos.push({ id: (this.todos.length) + 1, title: this.newTodo, completed: false });
					this.newTodo = ''
				}
			},
			// 移除事项
			removeTodo(item) {
				let index = this.todos.indexOf(item);
				this.todos.splice(index, 1)
			},
			// 完成事项删除
			removeCompleted() {
				// this.todos = this.todos.filter(item => !item.completed)
				// 直接在filters里筛选active里的任务,然后将active里的任务赋值给todos
				this.todos = filters.active(this.todos)
			},
			// 触发编辑框
			getEdit(item) {
				// 记录正在编辑的 todo，并保存原始 todo 内容。
				this.editTodo = item
				this.titleBefore = item.title;
			},
			//保存编辑
			editSave(item) {
				// if(!this.editTodo) return;
				this.editTodo = null;
				item.title = item.title.trim();
				if (!item.title) {
					this.removeTodo(item)
				}
			},
			// 取消编辑
			editCancle(item) {
				this.editTodo = null;
				item.title = this.titleBefore
			}
		}
	})


})(window);
